import React from 'react'

const Info = () =>
{

    // 初始化路由跳转对象
    const navigate = React.$Router.useNavigate()

    // 获取传过来的商品
    const [searchParams] = React.$Router.useSearchParams()
    const [pid,setPid] = React.useState(searchParams.get('pid'))

    // 初始化状态数据
    const [product,setProduct] = React.useState({})
    const [collection,setCollection] = React.useState(false)
    const [thumbs,setThumbs] = React.useState([])

    // 获取登录信息
    const [LoginUser,setLoginUser] = React.useState(React.$LoginUser)

    // 获取当前商品数据
    const getProductData = async () =>
    {
        let data = {
            pid:pid,
            busid:LoginUser.id
        }

        let result = await React.$Api.ProductInfo(data)

        if(result.code === 1)
        {
            setProduct(result.data)
            setCollection(result.data.check)
            setThumbs(result.data.thumbs_cdn)
        }else{
            React.$Vant.Notify.show({
                type:'warning',
                message:result.msg,
                onClose: () => {
                    navigate(-1)
                }
            })
        }
    }

    // hook函数
    React.useEffect(() => {
        getProductData()

        let LoginUser = React.$Cookie.load('LoginUser') ? React.$Cookie.load('LoginUser') : {}

        setLoginUser(LoginUser)
    },[])

    const cancel = async () =>
    {
        // 封装数据
        let data = {
            busid:LoginUser.id,
            proid:pid
        }

        let result = await React.$Api.ProductCancel(data)

        if(result.code === 1)
        {
            React.$Vant.Notify.show({
                type:'success',
                message:result.msg,
                onClose:() => {
                    setCollection(false)
                }
            })

            return false
        }else{
            React.$Vant.Notify.show({
                type:'warning',
                message:result.msg
            })

            return false
        }
    }

    const Collection = async () =>
    {
        if(!LoginUser || JSON.stringify(LoginUser) === "{}")
        {
            React.$Vant.Notify.show({
                type:'warning',
                message:'请先登录'
            })

            return false
        }

        if(LoginUser.auth != 1)
        {
            React.$Vant.Notify.show({
                type:'warning',
                message:'邮箱未认证，请先认证'
            })

            return false
        }

        // 封装数据
        let data = {
            busid:LoginUser.id,
            proid:pid
        }

        let result = await React.$Api.ProductCollection(data)

        if(result.code === 1)
        {
            React.$Vant.Notify.show({
                type:'success',
                message:result.msg,
                onClose:() => {
                    setCollection(true)
                }
            })

            return false
        }else{
            React.$Vant.Notify.show({
                type:'warning',
                message:result.msg
            })

            return false
        }
    }

    const lease = () =>
    {
        if(!LoginUser || JSON.stringify(LoginUser) === "{}")
        {
            React.$Vant.Notify.show({
                type:'warning',
                message:'请先登录'
            })

            return false
        }

        React.$Cookie.save('product',product)

        navigate('/lease/lease/add?proid='+pid)
    }

    const onBack = () =>
    {
        navigate(-1)
    }

    const check = () =>
    {
        if(collection)
        {
            return (
                <React.$Vant.ActionBar.Icon text="已收藏" icon={<React.$Icon.Star color="#f44336" />} onClick={cancel} />
            )
        }else{
            return (
                <React.$Vant.ActionBar.Icon text="收藏" icon={<React.$Icon.StarO  />} onClick={Collection} />
            )
        }
    }

    const home = () =>
    {
        navigate('/')
    }

    const Banner = () =>
    {
        if(thumbs.length > 0)
        {
            return (
                <React.$Vant.Swiper>
                    {thumbs.map((item,index) => {
                        return (
                            <React.$Vant.Swiper.Item key={index}>
                                <img src={item} alt="" />
                            </React.$Vant.Swiper.Item>
                        )
                    })}
                </React.$Vant.Swiper>
            )
        }
    }

    return (
        <>
            {/* 导航栏 */}
            <React.$Vant.Sticky>
                <React.$Vant.NavBar 
                    title='商品大全'
                    onClickLeft={onBack}
                />
            </React.$Vant.Sticky>

            <div className="banner_shouy">
                <Banner />
            </div>

            <div className="top_title">
                <h2>{product.name}</h2>
                <div className="money">
                    <h3>￥{product.rent_price}/天</h3>
                    <p>押金:￥{product.rent}</p>
                </div>
                <div className="youhuiq common">
                    <div className="text">
                        <h2>保障</h2>
                        <div className="tb">
                            <div className="tis_fuwu">
                                <ul>
                                    <li className="no">保障</li>
                                    <li>保障</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="youhuiq common common_no">
                    <div className="text">
                        <h2>配送</h2>
                        <div className="tb">
                            送货上门
                        </div>
                    </div>
                </div>
            </div>

            <div className="xiang_qing_xp" style={{}}>
                <div className='info' style={{fontSize:'20px',textAlign:'center',padding:'10px 55px',paddingBottom:'60px'}} dangerouslySetInnerHTML={{__html:product.content}}></div>
            </div>

            <React.$Vant.ActionBar>
                <React.$Vant.ActionBar.Icon text="首页" icon={<React.$Icon.ShopO  />} onClick={home} />
                    {/* 收藏按钮 */}
                    {check()}
                <React.$Vant.ActionBar.Button type="danger" text="立即租赁" onClick={lease} />
            </React.$Vant.ActionBar>
        </>
    )
}

export default Info